<template>
    <button :class="['btn', 'btn-' + type]">
        <slot></slot>
    </button>
</template>

<script>
export default {
    name: '',
    props: {
        type: {
            type: String,
            default: 'default'
        }
    }
}
</script>

<style scoped>
    .btn {
        width: 100%;
        border: none;
        padding: 10px 0;
    }
    .btn-primary {
        background-color: blue;
        color: #fff;
    }
    .btn-danger {
        background-color: red;
        color: #fff;
    }
    .btn-warn {
        background-color: orange;
        color: #fff;
    }
</style>